<template>
	<view class="">

		<u-modal v-model="addWebsite" :z-index='20' :show-cancel-button='true' title='添加调试域名' @confirm='confirmadd'
			ref="uModal">
			<view class="slot-content">
				<u-field type='textarea' label-width='60' required v-model="website" label="域名"
					placeholder="如:https://www.baidu.com">
				</u-field>
			</view>
		</u-modal>

		<u-popup :z-index='9' v-model="show" @close='closemoban' mode="bottom" border-radius="14" :closeable='true'
			height='88%'>
			<view class='title'>{{title}}
			
				<u-icon v-show="isLeftBnt" style='position: absolute;left: 2%;' @click='showAddConfie' name="plus-circle" color="#2979ff" size="38"></u-icon>

			</view>
			<view style="height: 98%; margin-top: 14%;">
				<view class='list' v-for="item,index in List" :key='index'>
					<view class="domain">
						<view>{{filterTime(item.tiem)}}
						</view>
						<view class="hsottitle">{{item.name}}</view>
						<view class="hsoturl">{{item.url}}</view>
						
					</view>
					<view class="tiem">
						<view>
							<u-icon name="chrome-circle-fill" size='40'></u-icon>
						</view>
						<view>
							<u-icon name="cut" :margin-left='40' size='40'></u-icon>
						</view>
						<view>
							<u-icon name="trash-fill" size='40'></u-icon>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: 'Home',
		data() {
			return {
				checked: false,
				show: true,
				addWebsite: false,
				website: '',
			}
		},
		props: {
			List: {
				type: Array,
				default: [],
			},
			title:{
				type:String,
				default:'调试域名'
			},
			isLeftBnt:{
				type:Object|Boolean,
				default:{
					icon:'图标',
					color:'颜色',
					size:30
				}
			}
		},
		created() {
		
		},
		methods: {
			closemoban() {
				this.$emit('closepopu')
				console.log(12312);
			},
			filterTime(data) {
				const [ydm, msh] = data.split(' ')
				let r = this.Public.GetData().startsWith(ydm) ? msh : data;
				return r
			},
			// 显示添加弹窗
			showAddConfie() {
				this.addWebsite = true
			},
			confirmadd() {

				/**
				 * 
				 *   ^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$

				例如：baidu.com 

 匹配网址：

^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$

例如： http://www.baidu.com

匹配http url：

^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*([\?&]\w+=\w*)*$

例如： http://www.tetet.com/index.html?q=1&m=test
				 */
				if (!(/^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$/
						.test(this.website))) {
					this.uniFunc.Toast('添加网站有误,请检查');
					this.addWebsite = true
					return false;
				} else {
					this.addWebsite = false
					console.log('正确');
				}
			},
		}
	}
</script>

<style scoped lang="less">
	.list {
		display: flex;
		margin-top: 20rpx;

		.icon {
			width: 10%;
			padding-left: 2%;
		}

		.domain {
			width: 85%;
			padding-left: 2%;

			height: auto;
			word-wrap: break-word;
			word-break: break-all;
		}

		.tiem {
			width: 30%;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin: auto;

			view {
				width: 33.3%;
			}
		}

		.msg {
			width: 80%;
		}
	}


	.title {
		text-align: center;
		padding: 10px;
		position: fixed;
		top: 0;
		height: 40px;
		background: #fff;
		width: 100%;
		z-index: 2;
	}
	.hsottitle{
		font-size: 16px;
		font-weight: bold;
		width: 100%;
		height: 40rpx;
		 overflow-y:scroll;
	}
	.hsoturl{
		width: 100%;
		height: 40rpx;
		 overflow-y:scroll;
	}
</style>
